<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/echarts.min2.js"></script>
    <script src="static/js/jquery-1.11.1.min.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    /*变量*/
    var date =[];//日期时间
    var dates = [];
    var date3=[];
    var date4=[];//数据
    var data = [];
    var data2 = [];
    var data3 = [];
    var data4 =[];
    var dd=[];
    var total ;
   function getusers() {//text_total文本数据统计
        $.ajax({
            type: "GET",
            url: "t_total.php",
            data: {},
            dataType: "json",
            success: function(result){
                console.log(result)
                if(result){
                    for(var key in result.value){
                        date.push(key);
                        data.push( result.value[key]);
                    }
                }
            },
            error: function(errmsg) {
                // console.log("error",errmsg)
                if(data==null)
                    alert("文本数据为空");
                else
                    alert("Ajax获取服务器数据出错了！"+ errmsg);
            }
        });
       console.log(date);
        return date,data;
    }
    function getusers2() {//image_total图片数据统计
        $.ajax({
            type: "GET",
            url: "i_total.php",
            data: {},
            dataType: "json",
            success: function(result){
                console.log(result)
                if(result){
                    for(var key in result.value){
                        dates.push(key);
                        data2.push( result.value[key]);
                    }
                }
            },
            error: function(errmsg) {
                // console.log("error",errmsg)
                alert("Ajax获取服务器数据出错了！"+ errmsg);
            }
        });
        return dates,data2;
    }
    function getusers3() {//content_total入群数据统计
        $.ajax({
            type: "GET",
            url: "c_total.php",
            data: {},
            dataType: "json",
            success: function(result){
                console.log(result)
                if(result){
                    for(var key in result.value){
                        date3.push(key);
                        data3.push( result.value[key]);
                    }
                }
            },
            error: function(errmsg) {
                // console.log("error",errmsg)
                alert("Ajax获取服务器数据出错了！"+ errmsg);
            }
        });
        return date3,data3;
    }
    function getusers4() {//person_total个人粉丝数据统计
        $.ajax({
            type: "GET",
            url: "p_total.php",
            data: {},
            dataType: "json",
            success: function(result){
                console.log(result)
                if(result){
                    for(var key in result.value){
                        date4.push(key);
                        data4.push( result.value[key]);
                    }
                }
            },
            error: function(errmsg) {
               // alert("请检查是否填写信息合理！！！");
               // location.href='Wopop.html';
            }
        });
        return date4,data4;
    }
    getusers();//text_total文本数据统计
    getusers2();//image_total图片数据统计
    getusers3();
    getusers4();//person_total个人粉丝数据统计
    /*接收处理的多条数据*/
    console.log(data4);
    function fetchData(cb) {
        // 通过 setTimeout 模拟异步加载
        setTimeout(function() {
            cb({
                categories: date,
                data: data,
                data2: data2,
                data3: data3,
                data4: data4
            });
        }, 1000);
    }
    /*Echart显示*/
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        backgroundColor: '#394056',
        title: {
            text: '数量',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
                color: '#F1F1F3'
            },
            left: '6%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ['文本', '图片', '新增','粉丝'],
            right: '4%',
            textStyle: {
                fontSize: 12,
                color: '#F1F1F3'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: []
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '文本',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(137, 189, 27, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(137, 189, 27, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(137,189,27)',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 12

                }
            },
            data: []
        }, {
            name: '图片',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 136, 212, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(0, 136, 212, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(0,136,212)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: []
        }, {
            name: '新增',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(219, 50, 51, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(219, 50, 51, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {

                    color: 'rgb(219,50,51)',
                    borderColor: 'rgba(219,50,51,0.2)',
                    borderWidth: 12
                }
            },
            data: []
        }, {
            name: '粉丝',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(199, 237, 250,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(199, 237, 250,0.2)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(199, 237, 250)',
                    borderColor: 'rgba(199, 237, 250,0.2)',
                    borderWidth: 12

                }
            },
            data: []
        }]
    };
    myChart.showLoading();
    fetchData(function(data) {
        myChart.hideLoading();
        myChart.setOption({
            xAxis: {
                data: data.categories
            },
          series: [{
                // 根据名字对应到相应的系列
                name: '文本',
                data: data.data
            },
              {
                  // 根据名字对应到相应的系列
                  name: '图片',
                  data: data.data2
              },
              {
                  // 根据名字对应到相应的系列
                  name: '新增',
                  data: data.data3
              },
              {
                  // 根据名字对应到相应的系列
                  name: '粉丝',
                  data: data.data4
              }
          ]
        });
    });
    myChart.setOption(option);
</script>
</body>

</html>